UI Development with Chakra UI Vue — Badges

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Badge

We can add badges with Chakra UI Vue.

To do this, we write:

<template>  
  <c-box>  
    <c-badge>Default</c-badge>  
  </c-box>  
</template>  
<script>  
import { CBadge, CBox } from "@chakra-ui/vue";  
export default {  
  components: {  
    CBadge,  
    CBox,  
  },  
};  
</script>

We add the CBadge component to add a badge.

Also, we can use the mx prop to add margins to all sides and the variant-color prop to add a color scheme to the badge:

<template>  
  <c-box>  
    <c-badge mx="2" variant-color="green">Default</c-badge>  
  </c-box>  
</template>  
<script>  
import { CBadge, CBox } from "@chakra-ui/vue";  
export default {  
  components: {  
    CBadge,  
    CBox,  
  },  
};  
</script>

Also, we can put the badge inside a CText component to add the badge beside the text:

<template>  
  <c-box>  
    <c-text font-weight="bold">  
      Jonathan  
      <c-badge :mt="-1" font-size="1em" variant-color="green"> New </c-badge>  
    </c-text>  
  </c-box>  
</template>  
<script>  
import { CBadge, CBox, CText } from "@chakra-ui/vue";  
export default {  
  components: {  
    CBadge,  
    CBox,  
    CText,  
  },  
};  
</script>

The font-size prop sets the font size of the content.

Conclusion

We can add a badge easily with Chakra UI Vue.